﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>pad_vue_wrap</title>
    <link href="../../static/mui/mui.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <template>
      <div class="git_Exchange_contain" ref="git_contain">
        <Header_other v-bind:header_name="header_name"></Header_other>
        <div class="header_select">
          <div class="base_btn" v-bind:class="{act:base_btn_click[0]}" v-on:click.self="base_btn_click_s(0)">
            浪漫排行
            <div class="sun_base_btn_wrap" v-show="base_btn_click[0]">
              <div class="sub_base_bnt sub_base_bnt_act">
                进行中
              </div>
              <div class="sub_base_bnt">
                预告
              </div>
            </div>
          </div>
          <div class="base_btn" style="opacity:0;">
            浪漫之图
          </div>
          <div class="base_btn" style="opacity:0;">
            浪漫活动
          </div>
          <div class="base_btn" style="opacity:0;">
            排行榜
          </div>
        </div>
        <div class="main_container">
          <!-- scroll_wrap -->
          <div id="wrap_scroller">
            <scroller :on-refresh="refresh"
                      :on-infinite="infinite" class="clearfix">
              <!-- content goes here -->
              <div class="" ref="el" id="scroller">
                <!-- content goes here -->
                <!-- box s-->
                <div class="langman" v-on:click="goTo_activity">
                  <div class="langman_header">
                    标题
                  </div>
                  <div class="simple_list">
                    <div class="simple_list_header">
                      活动简介：顶顶顶顶顶顶顶扭扭捏捏你哈哈哈哈哈哈哈哈
                      学生学生风帆股份国际环境和东风恶构图...
                    </div>
                    <img class="langman_img" src="../../static/img/bg_all.png" />
                  </div>
                  <div class="simple_list_bottom">
                    <div class="simple_list_time">
                      时间 &nbsp; &nbsp;2017.8.9 - 18:00
                    </div>
                    <div class="simple_list_people">
                      报名人数 &nbsp; &nbsp;500
                    </div>
                  </div>
                </div>
                <!-- box e -->
              </div>
            </scroller>
          </div>
        </div>
      </div>
    </template>
    <!-- built files will be auto injected -->
    <script src="../../static/js/vue.min.js"></script>
    <script src="../../static/mui/mui.min.js"></script>
    <script>


    </script>
    <script>
      //import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

      //import Header_other from "./header_other/Header_other.vue";
      ////limit_Scroll
      ////import limit_scroll from "../../static/js/limit_scroll.js"
      //var qs = require('qs');

      var app = new Vue({
        el: '#app',
        data: {
            msg: 'Welcome to Your Vue.js App',
            show_layer: false,
            get_layer_show: this.$store.getters.get_layer_show,
            layer_show: false,
            header_name: "吟诗颂词",
            layer_give_friend_data: false,
            give_other_data: false,
            this_box_msg: {},
            menu_list: [],
            base_btn_click: [false]
          },
          mounted: function () {
            //limit_scroll(this.$refs.el, this.$refs.git_contain);
            //qs.stringify({ 'rid': 2, "pageNo": 0, "pageSize": 6 }))
            let id = location.search.split("user_id=")[1];
            sessionStorage.setItem("user_id", id)
            this.$http.get('/api/user/sendInfo/getSendInfosByRid?rid=' + id + '&pageNo=1&pageSize=10')
              .catch((thrown) => {
                console.log(thrown)
              }).then((e) => {
                console.log(e.data)
                this.menu_list = e.data
              })
          },
          methods: {
            //跳转
            goTo_activity: function () {
              console.log("goTo_activity");
              this.$store.dispatch("thom_redirect",
                {
                  name: "/activity", router: this.$router
                });
            },
            //下拉
            ...mapGetters([
              "get_ajax_base"
            ]),
            base_btn_click_s: function (id) {
              console.log("base_bt_click++++++++++++++")
              //let length = base_btn_click.length;
              this.base_btn_click.forEach((item, i) => {
                //console.log(item, i);
                if (i != id) {
                  this.base_btn_click[i] = false
                }
              });
              //this.base_btn_click[id] = !this.base_btn_click[id];
              this.$set(this.base_btn_click, id, !this.base_btn_click[id]);

            },
            refresh: function (done) {
              this.$http.get('/api/user/sendInfo/getSendInfosByRid?rid=' + sessionStorage.getItem("user_id") + '&pageNo=1&pageSize=10')
                .catch((thrown) => {
                  console.log(thrown)
                }).then((e) => {
                  this.menu_list = e.data
                  setTimeout(() => {
                    done();
                  }, 400)
                })
            },
            //上啦
            infinite: function (done) {
              setTimeout(function () {
                done(true);
              }, 1000)
            },
            //弹出层
            layer_give_friend_f: function () {
              this.layer_give_friend_data = !this.layer_give_friend_data;
            },
            give_other: function () {
              this.give_other_data = !this.give_other_data
            },
            hide_detail_1: function () {
              this.layer_show = false;
            },
            //页面跳转
            goTo: function () {
              this.$store.dispatch("thom_redirect", { name: "/letter/SucLetter", router: this.$router });
            },
            open_certain_btn: function () {
              //show_layer 判断显示
              this.$store.dispatch("thom_redirect",
                {
                  name: "/Index_main/Wrap_certain_layer/Certain_layer_input", router: this.$router
                });
            },
            goTo_letter_man: function () {
              this.$store.dispatch("thom_redirect",
                {
                  name: "/Letter_man", router: this.$router
                });
            }
          },
        },
      })

      export default {
        name: 'hello',
        data() {
          return {
            msg: 'Welcome to Your Vue.js App',
            show_layer: false,
            get_layer_show: this.$store.getters.get_layer_show,
            layer_show: false,
            header_name: "吟诗颂词",
            layer_give_friend_data: false,
            give_other_data: false,
            this_box_msg: {},
            menu_list: [],
            base_btn_click: [false]

          }
        },
        mounted: function () {
          //limit_scroll(this.$refs.el, this.$refs.git_contain);
          //qs.stringify({ 'rid': 2, "pageNo": 0, "pageSize": 6 }))
          let id = location.search.split("user_id=")[1];
          sessionStorage.setItem("user_id", id)
          this.$http.get('/api/user/sendInfo/getSendInfosByRid?rid=' + id + '&pageNo=1&pageSize=10')
            .catch((thrown) => {
              console.log(thrown)
            }).then((e) => {
              console.log(e.data)
              this.menu_list = e.data
            })
        },
        methods: {
          //跳转
          goTo_activity: function () {
            console.log("goTo_activity");
            this.$store.dispatch("thom_redirect",
              {
                name: "/activity", router: this.$router
              });
          },
          //下拉
          ...mapGetters([
            "get_ajax_base"
          ]),
          base_btn_click_s: function (id) {
            console.log("base_bt_click++++++++++++++")
            //let length = base_btn_click.length;
            this.base_btn_click.forEach((item, i) => {
              //console.log(item, i);
              if (i != id) {
                this.base_btn_click[i] = false
              }
            });
            //this.base_btn_click[id] = !this.base_btn_click[id];
            this.$set(this.base_btn_click, id, !this.base_btn_click[id]);

          },
          refresh: function (done) {
            this.$http.get('/api/user/sendInfo/getSendInfosByRid?rid=' + sessionStorage.getItem("user_id") + '&pageNo=1&pageSize=10')
              .catch((thrown) => {
                console.log(thrown)
              }).then((e) => {
                this.menu_list = e.data
                setTimeout(() => {
                  done();
                }, 400)
              })
          },
          //上啦
          infinite: function (done) {
            setTimeout(function () {
              done(true);
            }, 1000)
          },
          //弹出层
          layer_give_friend_f: function () {
            this.layer_give_friend_data = !this.layer_give_friend_data;
          },
          give_other: function () {
            this.give_other_data = !this.give_other_data
          },
          hide_detail_1: function () {
            this.layer_show = false;
          },
          //页面跳转
          goTo: function () {
            this.$store.dispatch("thom_redirect", { name: "/letter/SucLetter", router: this.$router });
          },
          open_certain_btn: function () {
            //show_layer 判断显示
            this.$store.dispatch("thom_redirect",
              {
                name: "/Index_main/Wrap_certain_layer/Certain_layer_input", router: this.$router
              });
          },
          goTo_letter_man: function () {
            this.$store.dispatch("thom_redirect",
              {
                name: "/Letter_man", router: this.$router
              });
          }
        },
        components: {
          Header_other
        }
      }
    </script>
    <style scoped>
      /*langman box s */
      .simple_list_people {
        margin-right: 6vw;
      }

      .simple_list_time {
        margin-left: 3vw;
      }

      .simple_list_bottom {
        height: 32px;
        border-radius: 0 0 2vw 2vw;
        line-height: 32px;
        font-size: 14px;
        color: #9f5c2f;
        justify-content: space-between;
        display: flex;
      }

      .langman_img {
        width: 85vw;
        margin: 0 auto;
        border-radius: 2vw;
        height: 20vw;
        display: block;
        box-shadow: 2px 2px 1px 2px rgba(74, 72, 72, 0.2);
      }

      .simple_list_header {
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-size: 12px;
        padding-top: 7px;
        letter-spacing: 1px;
        padding-bottom: 11px;
        width: 81vw;
        margin: 0 auto;
        text-align: left;
      }

      .simple_list {
        height: 33vw;
        background-color: #dea675;
        color: #fff;
      }

      .langman_header {
        background-color: #9f5c2f;
        color: #fff;
        font-size: 14px;
        height: 30px;
        border-radius: 2vw 2vw 0 0;
        line-height: 30px;
      }

      .langman {
        margin: 8px auto 0;
        width: 90vw;
        border-radius: 2vw;
        box-shadow: 2px 2px 4px 4px #afafaf;
      }
      /*langman box e*/
      /*header_select s*/
      .header_select {
        line-height: 35px;
        height: 35px;
        background-color: #563117;
        display: flex;
        font-size: 0.7rem;
        color: #fff;
        text-align: center;
      }

      .git_Exchange_contain .header_select .act {
        background-color: #563117;
        -moz-box-shadow: -1px 0px 10px #3a210f inset; /* For Firefox3.6+ */
        -webkit-box-shadow: -1px 0px 10px #3a210f inset; /* For Chrome5+, Safari5+ */
        box-shadow: -1px 0px 10px #3a210f inset; /* For Latest Opera */
        background: url("../../static/img/tri_hd_up.png") no-repeat 21vw;
        background-size: 3vw;
      }

      .header_select .base_btn {
        width: 25vw;
        background: url("../../static/img/tri_hd.png") no-repeat 21vw;
        background-size: 3vw;
        position: relative;
      }

      .sun_base_btn_wrap {
        width: 27vw;
        background-color: #734424;
        top: 34px;
        left: 5vw;
        z-index: 1000;
        position: absolute;
      }

        .sun_base_btn_wrap .sub_base_bnt_act {
          background-color: #62391d;
        }

        .sun_base_btn_wrap .sub_base_bnt {
          width: 100%;
          height: 42.5px;
          line-height: 42.5px;
          text-align: center;
        }
      /*header_select e*/
      .Letter_box_letter {
        text-align: center;
        color: #9f5c2f;
        font-size: 0.7rem;
        background-color: #fff;
        padding: 1.3rem 3.2rem;
        border-radius: 2vw;
        width: 61%;
        margin-bottom: 1rem;
        box-shadow: 2px 2px 4px 2px rgba(180, 180, 180, 0.62);
        margin-top: 0.2rem;
      }

      .letter_box_right_btn .gz_btn {
        color: #fff;
        background-color: #9f5c2f;
      }

      .btn_base {
        float: left;
        padding: 0.2rem 0.5rem;
        font-size: 0.6rem;
        margin-top: 1.15rem;
        border: 2px solid #9f5c2f;
        color: #9f5c2f;
        border-radius: 1.2vw;
        margin-right: 0.1rem;
        text-align: center;
      }

      .letter_box_right_btn {
        float: right;
      }

      .Letter_box {
        width: 90%;
        margin: 1rem auto 0;
      }

      .letter_box_id {
        font-size: 0.7rem;
        color: #9f5c2f;
        margin-left: 0.2rem;
        margin-top: 0.1rem;
      }

      .leftter_box_right {
        float: left;
      }

      .bz_nane {
        padding: 0.35rem 0.75rem;
        background-color: #9f5c2f;
        border-radius: 1vw;
        color: #fff;
        text-align: center;
        font-size: 0.6rem;
        margin-left: 0.2rem;
        width: 50%;
        letter-spacing: 1px;
      }

      .letter_box_head {
        display: block;
        width: 2rem;
        height: 2rem;
        border: 2px solid #9f5c2f;
        float: left;
        border-radius: 1vw;
      }

      #wrap_scroller {
        //transform:translateY(20px);
        height: 28.4rem;
      }

      .box_bottom_wrap {
        margin-top: 0.3rem;
        padding-left: 5%;
        padding-right: 5%;
      }

      .m_L_15 {
        margin-left: 2vw;
      }

      .box_bottom_wrap .red_c {
        color: #e85454;
        border: 2px solid #e85454;
      }

      .box_base_btn {
        width: 20%;
        font-size: 0.7rem;
        height: 1.25rem;
        line-height: 2;
        border-radius: 2vw;
        border: 2px solid #9f5c2f;
        color: #9f5c2f;
      }

      .box_list li {
        width: 48%;
      }

      .box_list {
        border-radius: 2vw;
        background-color: #eeeeee;
        flex-wrap: wrap;
        font-size: 0.7rem;
        line-height: 2.45rem;
        width: 11.75rem;
        display: flex;
      }

      .box_header_wrap {
        padding-left: 1.4vw;
        padding-top: 0.35rem;
        display: flex;
        justify-content: space-between;
      }

      .bor_bot {
        border-bottom: 1px solid #dfdfdf
      }

      .border_L {
        border-right: 1px solid #dfdfdf;
      }

      .box_img_s {
        display: block;
        width: 4.75rem;
        height: 4.75rem;
        border-radius: 2vw;
        border: 2px solid #e9c7ac;
      }

      .box {
        height: 7.5rem;
        width: 93%;
        background-color: #fff;
        border-radius: 2vw;
        margin: 0.6rem auto;
        box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
      }

      .wenhao_img {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        top: 50%;
        right: 2vw;
        transform: translateY(-50%);
      }

      .main_container {
        height: 100%;
        background-color: #eeeeee;
      }

      .main_container_header {
        position: relative;
        height: 1.75rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        /*justify-content:space-between;*/
        font-size: 0.7rem;
        line-height: 2.6;
        color: #b4b4b4;
      }

      .main_container_header_act {
        color: #9f5c2f;
      }

      ._v-container {
        top: none;
        position: relative;
      }

      .git_Exchange_contain {
        height: 100%;
      }
    </style>
  </body>
</html>
